<template>
  <div class="about">
    <div id="map" ref="map"></div>
  </div>
</template>

<script setup>
// 导入相关包
import { onMounted } from '@vue/runtime-core'
import { ref } from 'vue'
import 'ol/ol.css'
import { Map, View } from 'ol'
// import { defaults as defaultControls } from 'ol/control'
import Tile from 'ol/layer/Tile'
import { fromLonLat } from 'ol/proj'
import OSM from 'ol/source/OSM'

const map = ref(null)
const initMap = () => {
  let target = 'map' //跟页面元素的 id 绑定来进行渲染
  let tileLayer = [
    new Tile({
      source: new OSM()
    })
  ]
  let view = new View({
    center: fromLonLat([104.912777, 34.730746]), //地图中心坐标
    zoom: 4.5 //缩放级别
  })
  map.value = new Map({
    target: target, //绑定dom元素进行渲染
    layers: tileLayer, //配置地图数据源
    view: view //配置地图显示的options配置（坐标系，中心点，缩放级别等）
  })
}
// 元素挂在后执行初始化操作
onMounted(() => {
  initMap()
})
</script>

<style scoped>
#map {
  width: 100%;
  height: 600px;
}
</style>

